<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="120px"
    >
    <el-form-item label="类型" prop="type">
        <el-select
          v-model="queryParams.type"
          style="width: 215px"
          placeholder="请选择类型"
          filterable
          clearable
          size="small"
        >
          <el-option
            v-for="dict in types"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
    <el-form-item label="创建日期" prop="valuedate1">
        <el-date-picker
          v-model="queryParams.valuedate1"
          type="date"
          style="width: 210px"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          @change="handleOrderDateChange"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="收件人" prop="receiverName">
        <el-input
          v-model="queryParams.receiverName"
          placeholder="请输入收件人"
          clearable
          size="small"
          style="width: 215px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="收件人邮箱" prop="receiverEmail">
        <el-input
          v-model="queryParams.receiverEmail"
          placeholder="请输入收件人邮箱"
          clearable
          size="small"
          style="width: 215px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="邮件标题" prop="subject">
        <el-input
          v-model="queryParams.subject"
          placeholder="请输入邮件标题"
          clearable
          size="small"
          style="width: 215px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="queryParams.status"
          style="width: 215px"
          placeholder="请选择发送状态"
          filterable
          clearable
          size="small"
        >
          <el-option
            v-for="dict in statusList"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <right-toolbar
        :showSearch.sync="showSearch"
        @handleQuery="handleQuery"
        @resetQuery="resetQuery"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="companyList"
      v-adaptive="{ bottomOffset: 50 }"
      height="100px"
    >
    <el-table-column
        label="序号"
        min-width="150"
        align="center"
        prop="id"
      >
      </el-table-column>
      <el-table-column
        label="类型"
        min-width="150"
        align="center"
        prop="type"
      >
      <template slot-scope="scope">
        {{statue(scope.row.type, types)}}
      </template>
      </el-table-column>
      <el-table-column
        label="收件人"
        min-width="150"
        align="center"
        prop="receiverName"
      >
      </el-table-column>
      <el-table-column
        label="收件人邮箱"
        min-width="150"
        align="center"
        prop="receiverEmail"
      >
    </el-table-column>
      <el-table-column
        label="邮件标题"
        min-width="150"
        align="center"
        prop="subject"
      >
      </el-table-column>
      <el-table-column
        label="邮件内容"
        min-width="150"
        align="center"
        prop="content"
      >
      <template slot-scope="scope">
        <el-tooltip placement="top" v-if=" null != scope.row.content && '' != scope.row.content">
        <div slot="content" v-html="scope.row.content"></div>
        <el-link type="primary">查看</el-link>
      </el-tooltip>
      </template>
      </el-table-column>
      <el-table-column
        label="附件"
        min-width="150"
        align="center"
        prop="attachmentFileBsId">
      <template slot-scope="scope">
          <el-link v-if="null != scope.row.fileInfo && scope.row.fileInfo.length > 0" 
          :href="scope.row.fileInfo[0].url" 
          type="primary">下载</el-link>
      </template>
      </el-table-column>

      <el-table-column
        label="发送状态"
        min-width="150"
        align="center"
        prop="status"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 10">{{
            statue(scope.row.status, statusList)
          }}</el-tag>
          <el-tag v-if="scope.row.status == 50" type="warning">{{
            statue(scope.row.status, statusList)
          }}</el-tag>
          <el-tag v-if="scope.row.status == 100" type="success">{{
            statue(scope.row.status, statusList)
          }}</el-tag>
          <el-tag v-if="scope.row.status == -1" type="danger">{{
            statue(scope.row.status, statusList)
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="失败原因"
        min-width="150"
        align="center"
        prop="errMsg"
        show-overflow-tooltip
      />
      <el-table-column
        label="创建时间"
        min-width="140"
        align="center"
        prop="createTime"
        show-overflow-tooltip
      />
      <el-table-column
        label="更新时间"
        min-width="140"
        align="center"
        prop="updateTime"
        show-overflow-tooltip
      />
      <el-table-column
        label="操作"
        width="100"
        align="center"
        fixed="right"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-link type="primary"
              @click="handleDetail(scope.row)"
              style="margin-right: 5px"
              >详情</el-link
            >
          <el-link type="primary"
            v-if="scope.row.status == -1"
            @click="handleUpdate(scope.row)"
            style="margin-right: 10px"
            >重发</el-link
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <div v-if="activate"></div>
  </div>
</template>
  
  <script>
import { emailList, retry } from "@/api/common/email";
export default {
  name: "Label",
  components: {},
  data() {
    return {
      visible: false,
      open: false,
      title: "",
      activate: true,
      // 遮罩层
      loading: false,
      form: {},
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 表格数据
      companyList: [],
      //状态名称
      statusList: [],
      // 类型
      types: [],
      // 查询参数
      queryParams: {
        createTimeEnd: null,
        createTimeStart: null,
        pageNum: 1,
        pageSize: 10,
      },
      pickerOptions: {
      disabledDate(v) {
      // 1、日期禁止选择今天以前的日期
      return v.getTime() > new Date().getTime();
      },
    }
    };
  },
  created() {
     //今天天的时间
    var day1 = new Date();
    var s1 = day1.format("yyyy-MM-dd");
    this.queryParams.valuedate = [s1, s1];
    this.queryParams.createTimeEnd = s1+ " 23:59:59";
    this.queryParams.createTimeStart = s1+ " 00:00:00";
    this.queryParams.valuedate1 = s1;
    this.queryParams = { ...this.queryParams };
    // 发送状态
    this.getDicts("send_email_status").then((res) => {
      this.statusList = res.data;
    });
     // 类型状态状态
     this.getDicts("email_type").then((res) => {
      this.types = res.data;
    });
    this.getList();
  },
  //触发回流
  activated() {
    this.activate = false;
    setTimeout(() => {
      this.activate = true;
    });
    this.getList();
  },
  methods: {
    /** 查询商品信息列表 */
    getList() {
      this.loading = true;
      emailList(this.queryParams).then((response) => {
        this.companyList = response.data;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        createTimeEnd: null,
        createTimeStart: null,
        pageNum: 1,
        pageSize: 10,
      };
    var day1 = new Date();
    var s1 = day1.format("yyyy-MM-dd");
    this.queryParams.valuedate = [s1, s1];
    this.queryParams.createTimeEnd = s1+ " 23:59:59";
    this.queryParams.createTimeStart = s1+ " 00:00:00";
    this.queryParams.valuedate1 = s1;
    this.queryParams = { ...this.queryParams };
    this.handleQuery();
    },
    //弹框关闭事件
    closeDialog() {
      //清空表单校验
      this.$refs.form.resetFields();
      this.form = {};
    },
    /** 重发按钮操作 */
    handleUpdate(row) {
      retry(row.id).then((response) => {
        this.msgSuccess("重发成功");
        this.getList();
      });
    },
  //时间查询
  handleOrderDateChange(v) {
    if (v) {
        this.queryParams.createTimeStart = v + " 00:00:00";
        this.queryParams.createTimeEnd = v + " 23:59:59";
    } else {
      this.queryParams.createTimeStart = null;
      this.queryParams.createTimeEnd = null;
      this.getList();
    }
    this.queryParams = { ...this.queryParams };
  },
  handleDetail(row){
        this.$router.push("/common/emailDetails/" + row.id);
  },
  //下载文件
  getDownload() {
      window.location.href = this.fileFormData.fileInfo[0].url;
  },
  },
};
</script>
  <style lang="scss" scoped>
.treeselect-main {
  width: 193px;
}
</style>
  